{% extends "base.html" %}

{% block title %}圈子 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="ink-decoration">圈子</h2>
                {% if current_user.is_teacher or current_user.is_admin %}
                <a href="{{ url_for('create_circle') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i> 创建圈子
                </a>
                {% endif %}
            </div>
            <p class="text-muted">加入兴趣圈子，与志同道合的朋友一起讨论。</p>
        </div>
    </div>
    
    <div class="row">
        {% if circles %}
            {% for circle in circles %}
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">{{ circle.name }}</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ circle.description|truncate(100) }}</p>
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">
                                    <i class="fas fa-users me-1"></i> {{ circle.members|length }} 名成员
                                </small>
                                <small class="text-muted">
                                    <i class="fas fa-comments me-1"></i> {{ circle.posts.count() }} 个帖子
                                </small>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-between">
                            <a href="{{ url_for('circle_detail', circle_id=circle.id) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-1"></i> 查看
                            </a>
                            
                            {% if circle.id in joined_circle_ids %}
                                <form action="{{ url_for('leave_circle', circle_id=circle.id) }}" method="post">
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i class="fas fa-sign-out-alt me-1"></i> 退出
                                    </button>
                                </form>
                            {% else %}
                                <form action="{{ url_for('join_circle', circle_id=circle.id) }}" method="post">
                                    <button type="submit" class="btn btn-outline-success btn-sm">
                                        <i class="fas fa-sign-in-alt me-1"></i> 加入
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">暂无圈子，快来创建第一个圈子吧！</p>
                {% if current_user.is_teacher or current_user.is_admin %}
                <a href="{{ url_for('create_circle') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i> 创建圈子
                </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.circle-meta {
    margin-top: 0.5rem;
}

.circle-meta .badge {
    margin-right: 0.5rem;
}

.member-avatars {
    display: flex;
    align-items: center;
}

.member-avatars img {
    margin-right: -10px;
    border: 2px solid white;
    transition: transform 0.2s;
}

.member-avatars img:hover {
    transform: translateY(-3px);
    z-index: 1;
}

.more-members {
    background: var(--ink-dark);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: 5px;
}

.circle-header {
    border-bottom: 1px solid var(--ink-border);
    padding-bottom: 1rem;
}
</style>
{% endblock %} 